<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts Treemap Example</title>
    <!-- 引入 ECharts 库 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 准备一个容器来放置图表 -->
    <div id="main" style="width: 600px; height: 400px;"></div>
    <!-- 文件输入框 -->
    <input type="file" id="fileInput" accept=".json">

    <script>
        // 初始化 ECharts 实例
        var myChart = echarts.init(document.getElementById('main'));

        // 读取文件并解析 JSON 数据
        document.getElementById('fileInput').addEventListener('change', function (event) {
            var file = event.target.files[0];
            if (file) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    var content = e.target.result;
                    try {
                        var jsonData = JSON.parse(content);
                        generateTreemap(jsonData);
                    } catch (error) {
                        console.error('解析 JSON 文件失败:', error);
                    }
                };
                reader.readAsText(file);
            }
        });

        // 生成 Treemap 图表
        function generateTreemap(jsonData) {
            // 将 JSON 数据转换为适合 Treemap 使用的格式
            var seriesData = transformDataToTreemap(jsonData);

            // 配置 Treemap 图表的选项
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}'
                },
                series: [{
                    type: 'treemap',
                    data: seriesData,
                    top: '1%',
                    left: '7%',
                    bottom: '1%',
                    right: '20%',
                    symbolSize: 7,
                    label: {
                        position: 'left',
                        verticalAlign: 'middle',
                        align: 'right',
                        fontSize: 9
                    },
                    leaves: {
                        label: {
                            position: 'right',
                            verticalAlign: 'middle',
                            align: 'left'
                        }
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    breadcrumb: {
                        show: true
                    }
                }]
            };

            // 使用指定的配置项和数据显示图表
            myChart.setOption(option);
        }

        // 将 JSON 数据转换为适合 Treemap 使用的格式
        function transformDataToTreemap(jsonData) {
            var treemapData = [];
            function traverse(data, parentName) {
                if (typeof data === 'object' && data !== null) {
                    for (var key in data) {
                        if (data.hasOwnProperty(key)) {
                            var item = {
                                name: parentName ? parentName + '.' + key : key,
                                value: 1 // 这里简单设为1，实际可以根据数据内容调整
                            };
                            treemapData.push(item);
                            if (typeof data[key] === 'object' && data[key] !== null) {
                                traverse(data[key], item.name);
                            }
                        }
                    }
                }
            }
            traverse(jsonData);
            return treemapData;
        }
    </script>
</body>
</html>